<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>传感器数据监控</title>
    <style>
        *{
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            border: 0;
            font-style:normal;
            font-weight:normal;
            font-family: "微软雅黑", Tahoma, Geneva, sans-serif;
        }
        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 0.6rem;
            background-color: #03396F;
        }
        ::-webkit-scrollbar-thumb {
            background-color: #034B95;
            border-radius: 0.3rem;
        }
        .box{
            background-color: #00225F;
            height: 100vh;
            overflow: auto;
            padding-top: 140px;
        }
        .top{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 140px;
            overflow: hidden;
            background-color: #00225F;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .top input{
            background: transparent;
            display: block;
            width: 200px;
            height: 80px;
            border: 3px solid #3A81D2;
            color: #A0F3FF;
            font-size: 40px;
            font-weight: bold;
            border-radius: 5px;
            line-height: 74px;
            text-align: center;
        }
        .top b{
            cursor: pointer;
            color: #A0F3FF;
            padding: 0 20px;
            letter-spacing: 2px;
        }
        .buttonbox{
            padding:10px 20px 20px 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .con{
            padding:10px 20px 20px 20px;
            display: flex;
            flex-wrap: wrap;
        }
        .buttonbox button{

            margin: 15px;
            padding: 5px 5px;
        }
        .con article{
            margin: 15px 15px;
            background-color: #055985;
            color: #24E8FF;
            height: 38px;
            font-size: 14px;
            padding: 0 20px;
            line-height: 38px;
            cursor: pointer;
        }


    </style>
</head>
<body>
<div class="box">
    <div class="top">
        <input value="--" type="text" readonly/>
        <b onclick="editFn();">修改</b>
    </div>
    <div class="buttonbox">
        <div>
            <button id="speed-off" onclick="writeOPCBool(speedRelieveSensor.dataId,!speedRelieveSensor.value)">速度解除</button>
            <button id="speed-on" onclick="writeOPCBool(speedStartSensor.dataId,!speedStartSensor.value)">速度投入</button>
        </div>
        <div>
            <button id="switch-off" onclick="writeOPCBool(switchRelieveSensor.dataId,!switchRelieveSensor.value)">开停解除</button>
            <button id="switch-on" onclick="writeOPCBool(switchStartSensor.dataId,!switchStartSensor.value)">开停投入</button>
        </div>
        <div>
            <button id="video-off" onclick="writeOPCBool(videoRelieveSensor.dataId,!videoRelieveSensor.value)">视频解除</button>
            <button id="video-on" onclick="writeOPCBool(videoStartSensor,!videoStartSensor.value)">视频投入</button>
        </div>
    </div>
    <div class="con">

    </div>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script>
    var stompClient = null;
    var testSensor={
        dataId:"数据类型示例.8 位设备.R 寄存器.Boolean1",
        value:false
    };
    var speedRelieveSensor={
        dataId: "SDJC.PV",
        value: false
    };
    var speedStartSensor={
        dataId:"SDTR.PV",
        value:false
    };
    var switchRelieveSensor={
        dataId:"KTJC.PV",
        value: false
    };
    var switchStartSensor={
        dataId:"KTTR.PV",
        value:false
    };
    var videoRelieveSensor={
        dataId:"SPJC.PV",
        value:false
    };
    var videoStartSensor={
        dataId:"SPTR.PV",
        value:false
    }
    $(function(){
        if(stompClient == null){
            openSocketFn();
        }

        getCgq();
        $('.top input').on('blur',function(){
            if(new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/).test($('.top input').val())){
                $('.top input').attr('readonly',true);
            }else{
                alert("请输入数字")
            }
        });
        $('.con').on('click','article',function(){
            if(stompClient == null){
                openSocketFn();
            }
            var s = $(this).text();
            stompClient.send("/app/one", {}, JSON.stringify({'message': s }));
        })
    })
    function getCgq(){
        $.ajax({
            url:'http://localhost:8080/opc/items',
            type:'get',
            success: function(res){
                $('.con').empty();
                for(var i = 0; i < res.length; i++){
                    $('.con').append($('<article>'+ res[i] +'</article>'))
                }
            }
        })
    }
    function writeOPCBool(itemId,bool) {
        var settings = {
            "url": "http://localhost:8080/opc/write",
            "method": "PUT",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json"
            },
            "data": JSON.stringify({"itemId":itemId,"value":bool}),
        };

        $.ajax(settings).done(function (response) {
            console.log(response);
            if (response.itemId==testSensor.dataId){
                testSensor.value = response.value;
                console.log("测试写入布尔值后变化"+testSensor.value)
                if (testSensor.value){
                    $('#sdjc').css("background-color","#1B9AF7");
                } else {
                    $('#sdjc').css("background-color","#b4b3b5");
                }
            }
            if (response.itemId==speedRelieveSensor.dataId){
                speedRelieveSensor.value = response.value;
                if (speedRelieveSensor.value){
                    $('#speed-off').css("background-color","#1B9AF7");
                } else {
                    $('#speed-off').css("background-color","#b4b3b5");
                }
                console.log(speedRelieveSensor)
            }
            if (response.itemId==speedStartSensor.dataId){
                speedStartSensor.value = response.value;
                if (speedStartSensor.value){
                    $('#speed-on').css("background-color","#1B9AF7");
                } else {
                    $('#speed-on').css("background-color","#b4b3b5");
                }
                console.log(switchStartSensor)
            }
            if (response.itemId==switchRelieveSensor.dataId){
                switchRelieveSensor.value =response.value;
                if (switchRelieveSensor.value){
                    $('#switch-off').css("background-color","#1B9AF7");
                } else {
                    $('#switch-off').css("background-color","#b4b3b5");
                }
                console.log(switchRelieveSensor)
            }
            if (response.itemId==switchStartSensor.dataId){
                switchStartSensor.value = response.value;
                if (switchStartSensor.value){
                    $('#switch-on').css("background-color","#1B9AF7");
                } else {
                    $('#switch-on').css("background-color","#b4b3b5");
                }
                console.log(switchStartSensor)
            }
            if (response.itemId==videoRelieveSensor.dataId){
                videoRelieveSensor.value = response.value;
                if (videoRelieveSensor.value){
                    $('#video-off').css("background-color","#1B9AF7");
                } else {
                    $('#video-off').css("background-color","#b4b3b5");
                }
                console.log(videoRelieveSensor)
            }
            if (response.itemId==videoStartSensor.dataId){
                videoStartSensor.value = response.value;
                if (videoStartSensor.value){
                    $('#video-on').css("background-color","#1B9AF7");
                } else {
                    $('#video-on').css("background-color","#b4b3b5");
                }
                console.log(videoStartSensor)
            }

        });
    }

    function editFn(){
        stompClient.disconnect();
        stompClient = null;
        $('.top input').attr('readonly',false).focus();
    }
    function openSocketFn(){
        var socket = new SockJS('/socket/sample');
        var s = window.location.toString();
        var accessToken = s.substring(s.indexOf("?") + 1);
        stompClient = Stomp.over(socket);
        stompClient.connect({"Authorization": "Bearer " + accessToken}, function (frame) {
            stompClient.subscribe('/topic/clockmessage', function (msg) {
                if(new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/).test(JSON.parse(msg.body).message)){
                    $('.top input').val(JSON.parse(msg.body).message);
                }else{
                    $('.top input').val("--");
                }
            });
            stompClient.subscribe('/user/topic/clockmessage', function (msg) {
                if(new RegExp(/(^[\-0-9][0-9]*(.[0-9]+)?)$/).test(JSON.parse(msg.body).message)){
                    $('.top input').val(JSON.parse(msg.body).message);
                }else{
                    $('.top input').val("--");
                }
            });
        });
    }

</script>
</body>
</html>
